<template>
	<view>
		<cu-custom :bgcolor="'#fff'" />
		<uni-forms :modelValue="formData" label-position="top" :rules="rules" ref="form">
			<view class="pdf-box">
				<view class="p-2">
					<uni-forms-item required label="标题" name="title">
						<uni-easyinput type="text" v-model="formData.title" placeholder="请输入标题" />
					</uni-forms-item>
					<uni-forms-item required name="money" label="红包金额" label-width="120">
						<uni-data-select v-model="formData.money" :localdata="xqMoneyList" @change="changeXqMoney"
							placeholder="请选择红包金额"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item required name="commitment" label="优惠券金额承担" label-width="120">
						<uni-data-select v-model="formData.commitment" :localdata="otherMoneyList" @change="changeOtherMoney"
							placeholder="请选择优惠券金额承担"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item required name="ava" label="使用条件" label-width="120">
						<uni-data-select v-model="formData.ava" :localdata="filterMoneyList" 
							placeholder="请选择使用条件"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item required name="datetimerange" label="红包有效期" label-width="120">
						<uni-datetime-picker v-model="formData.datetimerange" type="datetimerange" start="" end=""
							rangeSeparator="-" start-placeholder="开始时间" end-placeholder="结束时间" />
					</uni-forms-item>
					<uni-forms-item required name="idCard" label="红包发放方式" label-width="120">
						<uni-data-checkbox v-model="formData.send_type" :localdata="sexs" disabled />
					</uni-forms-item>
					<uni-forms-item required name="sort" label="排序" label-width="120">
						<uni-easyinput type="number" v-model="formData.sort" placeholder="请输入排序" />
					</uni-forms-item>
				</view>
			</view>
		</uni-forms>
		<view class="button-box p-2">
			<button class="main-bg-color text-white font-md" @click="submit">确认</button>
		</view>
	</view>
</template>

<script>
	import cuCustom from '@/components/common/custom.vue'
	import interceptor from "@/utils/request.js"
	export default {
		components: {
			cuCustom
		},
		data() {
			return {
				formData: {
					title: "",
					money: null,
					commitment: "",
					ava: null,
					datetimerange: [],
					get_type: 1,
					send_type: 0,
					sort:null
				},
				rules: {
					title: {
						datetimerange: [{
								required: true,
								errorMessage: '请输入红包标题',
							}
						]
					},
					money: {
						datetimerange: [{
								required: true,
								errorMessage: '请选择红包金额',
							}
						]
					},
					commitment: {
						datetimerange: [{
								required: true,
								errorMessage: '请选择优惠券金额承担',
							}
						]
					},
					ava: {
						datetimerange: [{
								required: true,
								errorMessage: '请选择使用条件',
							}
						]
					},
					datetimerange: {
						datetimerange: [{
								required: true,
								errorMessage: '请设置红包有效期',
							}
						]
					},
					sort: {
						rules: [{
							format: 'number',
							errorMessage: '请输入排序',
						}]
					},
					
				},
				xqMoneyList:[],
				otherMoneyList:[],
				filterMoneyList:[],
				sexs: [{
					text: '自动发放',
					value: 0
				}, {
					text: '手动发放',
					value: 1
				}]
			}
		},
		onShow() {
			this.getXqMoney()
		},
		methods: {
			submit(){
				this.$refs.form.validate().then(res => {
					
					let params = Object.assign({}, {
						supplier_id: uni.getStorageSync('supplier_id'),
						start_time: this.formData.datetimerange[0],
						end_time:this.formData.datetimerange[1]
					}, this.formData)
					interceptor.get('/supplier_applet_api.php?act=redpacketAdd', params).then((res) => {
						if (res.status === 1) {
							uni.showToast({
								title: res.msg,
								icon: "none",
								success() {
									uni.navigateBack()
								}
							})
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							})
						}
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			// 获取蟹券金额
			getXqMoney() {
				// 1红包
				// 2满减
				// 3优惠券
				// 4首单立减
				// 5蟹券
				interceptor.get('/supplier_applet_api.php?act=selFirst', {
					type: 1
				}).then((res) => {
					res.info.map((item) => {
						item.value = item.val
					})
					this.xqMoneyList = res.info
				})
			},
			changeXqMoney(e) {
				this.otherMoneyApi(e)
			},
			// 第三方查询接口
			otherMoneyApi(id) {
				interceptor.get('/supplier_applet_api.php?act=selSecond', {
					type: 1,
					money: id
				}).then((res) => {
					res.info.map((item) => {
						item.value = item.val
					})
					this.otherMoneyList = res.info
				})
			},
			changeOtherMoney(e) {
				this.getFilterAPi(e)
			},
			// 查询使用条件接口
			getFilterAPi(id) {
				interceptor.get('/supplier_applet_api.php?act=selThird', {
					type: 1,
					money: this.formData.money,
					con: id
				}).then((res) => {
					res.info.map((item) => {
						item.value = item.val
					})
					this.filterMoneyList = res.info
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-forms-item {
		.uni-forms-item__label {
			font-weight: 500;
			font-size: 30rpx;
			color: #393F4C;
		}
		.uni-easyinput__content{
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}
		.uni-select{
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}
		.uni-date-x--border{
			border: 0;
			border-radius: 0;
			background: transparent !important;
			border-bottom: 2px solid #E1E5ED !important;
		}

		.uni-date-x {
			background: transparent !important;
		}
	}
	.button-box {
		// position: absolute;
		// bottom: 0;
		background: #F8F8F8;
		height: 100upx;
		width: 100%;
		box-sizing: border-box;
	}
</style>